<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/css.css">
    <link rel="stylesheet" href="../css/pinpai.css">
</head>
<body>
<!--头部-->
<div class="header">
    <div class="header-inner">
        <!--头部导航-->
        <div class="ong-header clearfix">
            <a href="../index.html">
                <img src="../images/ewbottom3.png" alt="" class="Logo Left">
            </a>
            <div class="Left" id="Logo_Left">
                E-commerce
                <br>
                Operation Service Provider
                <br>
                For International Brands
                <br>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"><i></i></span>
            </button>
            <div class="Right">
                <ul class="nav justify-content-end  NG">
                    <li class="nav-item">
                        <a class="nav-link" href="../index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../page/gs.html">公司</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="">品牌</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../page/about.html">2019梦想召唤季</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--中部上部-->
<div class="m-hezuo">
    <div class="m-hezuo-one">
        <div class="hezuo-head">
            <p>赢得众多国际品牌的信赖</p>
            <p>Win the trust of numerous global brands</p>
        </div>
        <p class="hezuo-p">
            <span></span>
            <span class="h-span">点击品牌 <a href="">在线购买</a></span>
            <span></span>
        </p>
    </div>
</div>
<!--中部-->
<!--选项卡-->
<div class="main-b">
    <div class="main-b-one">
        <div class="indexmaindiv1">
            <a href="" class="cbrand-list active">容颜愉悦</a>
            <a href="" class="cbrand-list">饮食愉悦</a>
            <a href="" class="cbrand-list">居家愉悦</a>
            <a href="" class="cbrand-list">身心愉悦</a>
        </div>
        <div class='moudel activer'>
            <ul class="clearfix">
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/1-1.png" alt="">
                        <div class="moudel-one">全球著名小家电品牌，多项国际工业设计大奖，百年经典，德国博朗。</div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/1-2.png" alt="">
                        <div class="moudel-one">全球著名口腔护理品牌，ADA唯一认可电动牙刷，德国精工，国际口腔专家。</div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/1-3.png" alt="">
                        <div class="moudel-one">欧莱雅集团旗下高端护肤品牌。将声波科技与肌肤护理结合，以声波洁面代替传统手洗，掀起肌肤清洁新革命。</div>
                    </a>
                </li>
            </ul>
        </div>
        <div class='moudel'>
            <ul class="clearfix">
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/2-1.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/2-2.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/2-3.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
            </ul>
        </div>
        <div class='moudel'>
            <ul class="clearfix">
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/3-1.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/3-2.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/3-3.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
            </ul>
        </div>
        <div class='moudel'>
            <ul class="clearfix">
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/4-1.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/4-2.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
                <li class="moudel-li">
                    <a href="">
                        <img src="../images/4-3.jpg" alt="">
                        <div class="moudel-one"></div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>


<!--底部-->
<div class="footer">
    <div class="footer-inner clearfix">
        <div class="bottom-left">
            <div class="bottom-two">
                <p class="b-text-one">招贤纳士</p>
                <p class="b-text">电话: 13306522921</p>
                <p class="b-text">邮箱: zhaopin@sowow.com</p>
            </div>
            <div class="bottom-one">
                <p class="b-text-one">联系我们</p>
                <p class="b-text">地址: 杭州经济技术开发区白杨街道科技园路</p>
                <p class="b-text">2号新加坡科技园5楼Leo楼3层</p>
                <p class="b-text">邮编: 310018</p>
            </div>
        </div>
        <div class="bottom-right">
            <div class="b-r-box">
                <img src="../images/ewbottom1.png" alt="">
                <div>关注官方微信</div>
            </div>
            <div class="b-r-box">
                <img src="../images/ewbottom2.png" alt="">
                <div>关注官方微博</div>
            </div>
            <div class="bottom-one-img">
                <img src="../images/ewbottom3.png" alt="" class="img-b">
            </div>
        </div>
    </div>
    <div class="bottom-text-f">
        备案号:浙ICP备15006544号-3 2011-2019浙江速网电子商务有限公司ALL Rights Reserved
        <div class="b-a-img">
            <a href="" class="clearfix">
                <img src="../images/gabalogo.png" alt="">
                <p>浙公网安备 33011802001703号</p>
            </a>
        </div>
    </div>
</div>
<!--选项卡代码-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="../script/script2.js"></script>
<script>
    var navLi = document.querySelectorAll('.indexmaindiv1 .cbrand-list');
    var main = document.querySelectorAll('.moudel');
    for(var i = 0; i < navLi.length; i++){
        navLi[i].index = i;
        navLi[i].onmouseover = function(){
            for(var j = 0 ; j < navLi.length; j++){
                navLi[j].classList.remove('activer');
                main[j].classList.remove('activer');
            }
            this.classList.add('activer');
            main[this.index].classList.add('activer');
        }
    }
</script>
</body>
</html>